<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单练习</title>
		<!--引入外部第三方css文件,rel固定值：样式表，href连接地址
		.min意思是最小文件
		-->
		<link rel="stylesheet" href="css/bootstrap.min.css"/>
	</head>
	<body>
		<!--container:容器-->
		<div class="container">
			<h2>学生信息管理系统</h2>
		
		<div class="form-group">
		<!--label:自动加粗-->
		<label for="username">姓名：</label>
		<!--文本输入框 h5新特性-->
		<!--palceholder是灰色字，value是深色字-->
		<input type="text" name="username" id="username"
		   class="form-control"
		   placeholder="请输入姓名……" 
		/>
		</div>
		
		<div class="form-group">
			<label for="age">年龄：</label>
			<input type="number" name="age" id="age" 
			class="form-control"
			placeholder="请输入年龄……" />
		</div>
		
		<div  class="form-group">
			<label >性别：（单选）</label>
			<!--radio互斥，同名只能选取一个-->
			<div class="radio-inline">
			<input type="radio" name="sex" id="sex" />男
			</div>
			<div class="radio-inline">
			<input type="radio" name="sex" id="sex" />女
			</div>
		</div>
		
		<div  class="form-group">
			<label >爱好：（多选）</label>
			<div class="checkbox-inline">
			<input type="checkbox" name="hobby" id="hobby"/>篮球
			</div>
			<div class="checkbox-inline">
			<input type="checkbox" name="hobby" id="hobby"/>打游戏
			</div>
			<div class="checkbox-inline">
			<input type="checkbox" name="hobby" id="hobby"/>看电影
			</div>
			<div class="checkbox-inline">
			<input type="checkbox" name="hobby" id="hobby"/>看小说
			</div>
		</div>
		
		<div  class="form-group">
			<label>学历：（下拉框）</label>
			<select name="edu" id="edu">
				<option value="1">中专</option>
				<option value="2">大专</option>
				<option value="3">本科</option>
				<option value="4">研究生</option>
				<option value="5">博士</option>
			</select>
		</div>
		
		<div  class="form-group">
			<!--class属性支持多个样式，样式之间用空格隔开-->
			<input class="btn btn-primary" type="button" name="submit" value="保存"/>
			<button class="btn btn-danger" name="clear">取消</button>
		</div>
		
		
		</div>
	</body>
</html>
